import { Meta, Status, Props, Story } from '../../../../.storybook/components';
import * as Stories from './ButtonGroup.stories';

<Meta of={Stories} />

# ButtonGroup

<Status variant="stable" />

The ButtonGroup component groups and formats two buttons. It adds spacing between buttons and handles responsiveness.

<Story of={Stories.Base} />

<Props />

## Component variations

By default, buttons passed to the ButtonGroup will be centered. Use the `align` prop to align the buttons to the left or to the right on wide viewports. This has no effect on narrow viewports.

<Story of={Stories.Alignment} />

## Accessibility

All accessibility considerations for the [`Button` component](Components/Button) also apply to the `ButtonGroup`.
